<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 	xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:p="http://primefaces.org/ui" 
		xmlns:pe="http://primefaces.org/ui/extensions" >
<h:body>
	<ui:composition template="/templates/master.xhtml">
		<ui:define name="content">
			<h:form id="membershipList">
			<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" >
				<p:effect type="fade" event="load" delay="1000" />
			</p:messages>  
			<p:panel id="panel" header="Membership Package List">  
				<p:accordionPanel activeIndex="-1">  
					<p:tab title="Filter" > 
						<h:panelGrid columns="4" cellpadding="5">
							<h:outputLabel for="name" value="Name:" />  
					    	<p:inputText id="name" value="#{membershipMB.membershipSearch.name}" />					
							<h:outputLabel for="status" value="Status:" />  
							<p:selectOneMenu id="status" value="#{membershipMB.membershipSearch.active}">  
					            <f:selectItem itemLabel="Active" itemValue="true" /> 
					            <f:selectItem itemLabel="Inactive" itemValue="false" /> 
					        </p:selectOneMenu>
					        
							<h:outputLabel for="priceFrom" value="Price From:" />  
					    	<pe:inputNumber id="priceFrom" value="#{membershipMB.membershipSearch.priceFrom}" />	
							<h:outputLabel for="priceTo" value="Price To:" />  
					    	<pe:inputNumber id="priceTo" value="#{membershipMB.membershipSearch.priceTo}" />						    						         					    		
						</h:panelGrid> 
						<p:commandButton value="Search" action="#{membershipMB.search}" update=":membershipList:membershipTable"/>						
					</p:tab>
				</p:accordionPanel>								
			    <p:dataTable id="membershipTable" var="membership" value="#{membershipMB.allMemberships}" sortMode="multiple" 
			    	rows="20" paginator="true" filteredValue="#{membershipMB.filteredMemberships}">
			    
					<p:ajax event="rowSelect" listener="#{membershipMB.onRowSelect}" />
					<p:ajax event="rowUnselect" listener="#{membershipMB.onRowUnselect}" />  

			        <p:column id="NameCol" sortBy="#{membership.name}" headerText="Name" >  
			            <h:outputText value="#{membership.name}" />  
			        </p:column>  
			  
			        <p:column id="PriceCol" sortBy="#{membership.price}" headerText="Price">  
			            <h:outputText value="RM #{membership.price}" />  
			        </p:column>  
			  
			        <p:column id="CreatedCol" sortBy="#{membership.createDate}" headerText="Created Date" >  
			            <h:outputText value="#{membership.createDate}" >
			            	<f:convertDateTime pattern="dd MMM yyyy" />
			            </h:outputText>  
			        </p:column>  
			  
			        <p:column id="StatusCol" sortBy="#{membership.active}" headerText="Status" >  
			            <h:outputText value="#{membership.active==true?'Active':'Inactive'}" />  
			        </p:column>  
			        
			        <p:column width="1%" headerText="Action">
			        	<p:commandButton id="updateBtn" icon="ui-icon-pencil" update=":UpdateMembershipForm" onclick="membershipUpdateDialogWidget.show();" 
			        		process="@this" actionListener="#{membershipMB.preSelectedMembership(membership)}" 
			        		rendered="#{membership.active}" styleClass="list-button">
							<f:setPropertyActionListener target="#{membershipMB.membership}" value="#{membership}" />
						</p:commandButton>	
			        	<p:commandButton id="inactiveBtn" icon="ui-icon-trash" update=":InactiveMembershipForm" onclick="membershipInactiveDialogWidget.show();" 
			        		process="@this" actionListener="#{membershipMB.preSelectedMembership(membership)}" 
			        		rendered="#{membership.active}" styleClass="list-button">
							<f:setPropertyActionListener target="#{membershipMB.membership}" value="#{membership}" />
						</p:commandButton>									        
			        </p:column>
			    </p:dataTable> 




			</p:panel>
			</h:form>
			<ui:include src="/member/membership/Update.xhtml" />
			<ui:include src="/member/membership/Inactive.xhtml" />
		</ui:define>
	</ui:composition>
</h:body>
</html>